<template>
    <main class="py-16">
        <div class="container-custom">
            <div class="max-w-4xl mx-auto">
                <h1 class="mb-8 text-4xl font-bold text-center">关于我们</h1>

                <div class="space-y-12">
                    <section class="fade-in">
                        <h2 class="mb-4 text-2xl font-semibold">公司简介</h2>
                        <p class="leading-relaxed text-gray-600">
                            西旺（西安）数字科技有限公司是一家创新型软件研发公司，专注聚焦汽车后市场细分领域，致力于通过AI人工智能技术，采用SaaS+数据+AI人工智能的方式，为汽配外贸商，汽配经销商、汽配零部件制造工厂提供上下游一体化、数字化、智能化的快速报价系统，通过AI人工智能技术自动识别并快速导入询价单，提供本客户销售历史，其他客户销售历史，采购历史参考等多种智能报价策略助力客户实现秒级报价，第一时间抓住商机。
                        </p>
                    </section>

                    <section class="fade-in">
                        <h2 class="mb-4 text-2xl font-semibold">我们的团队</h2>
                        <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
                            <div v-for="(member, index) in team" :key="index" class="text-center">
                                <img
                                    :src="member.avatar"
                                    :alt="member.name"
                                    class="w-32 h-32 mx-auto mb-4 rounded-full" />
                                <h3 class="font-semibold">{{ member.name }}</h3>
                                <p class="text-gray-600">{{ member.position }}</p>
                            </div>
                        </div>
                    </section>

                    <section class="fade-in">
                        <h2 class="mb-4 text-2xl font-semibold">企业文化</h2>
                        <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                            <div v-for="value in values" :key="value.id" class="p-6 rounded-lg bg-gray-50">
                                <h3 class="mb-2 text-xl font-semibold">{{ value.title }}</h3>
                                <p class="text-gray-600">{{ value.description }}</p>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CeoImg from "../assets/ceo.jpg";
import Lidongwei from "../assets/lidongwei.png";
import Zhaosiqi from "../assets/zhaosiqi.png";
import Tangfangyu from "../assets/tangfangyu.jpg";
import Yangbosen from "../assets/yangbosen.png";
import Yujiao from "../assets/yujiao.jpg";
import Luoxi from "../assets/luoxi.jpg";
import Xuhua from "../assets/xuhua.png";
import Liangchaoxiong from "../assets/liangchaoxiong.jpg";

const team = ref([
    {
        name: "张建勇",
        position: "CEO",
        avatar: CeoImg,
    },
    {
        name: "梁朝雄",
        position: "技术总监/架构师",
        avatar: Liangchaoxiong,
    },
    {
        name: "赵思奇",
        position: "运营经理/市场总监",
        avatar: Zhaosiqi,
    },
    {
        name: "唐芳瑜",
        position: "产品经理/设计师",
        avatar: Tangfangyu,
    },
    {
        name: "罗玺",
        position: "研发经理/架构师",
        avatar: Luoxi,
    },
    {
        name: "李冬伟",
        position: "项目经理/JAVA开发工程师",
        avatar: Lidongwei,
    },
    {
        name: "杨博森",
        position: "全栈开发工程师",
        avatar: Yangbosen,
    },
    {
        name: "于娇",
        position: "前端开发工程师",
        avatar: Yujiao,
    },
    {
        name: "徐华",
        position: "前端开发工程师",
        avatar: Xuhua,
    },
]);

const values = ref([
    {
        id: 1,
        title: "效率",
        description: "以流程优化驱动效能跃升，通过智能化工具实现资源集约化应用，让每个决策周期缩短30%以上",
    },
    {
        id: 2,
        title: "品质",
        description: "建立128项全流程品控节点，采用六西格玛管理体系，确保交付成果达到99.97%的客户满意度标准",
    },
    {
        id: 3,
        title: "务实",
        description: "基于PDCA循环打造落地闭环，将战略规划分解为300+可量化执行项，确保愿景到成果的可靠转化",
    },
    {
        id: 4,
        title: "专业",
        description: "由行业TOP5%专家团队领衔，持有27项专业认证资质，持续输出符合ISO国际标准的解决方案",
    },
    {
        id: 5,
        title: "执行",
        description: "构建OKR-KPI双轨管理体系，实现战略解码到战术执行的72小时快速响应机制，承诺兑现率达100%",
    },
]);
</script>

<style scoped>
.fade-in {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
